<template>
	<view class="song_sheet">
		<image :src="pubUrl+menu.musicListImg" class="background"></image>
		<view class="list">
			<image src="../../static/img/play.png" class="playImg" @click="addsetSongSheetList()"></image>
			<view class="item" v-for="(item, index) in list" :key="index">
				<image :src="pubUrl + item.musicImg" class="cover"></image>

				<view class="msgBox">
					<view class="song">{{item.musicName}}</view>
					<view class="singer">{{item.musicAuthor}}</view>
				</view>
				<image src="../../static/img/dian.png" class="dian"></image>
			</view>
		</view>
	</view>
</template>

<script>
import { getbymusiclist, getbMenuByid } from '@/api/song';
import { pubUrl } from '@/api/http.js';
import store from '@/store/index.js';
import {initAudio} from '@/common/Audio'
export default {
	data() {
		return { list: [], pubUrl: '', menu: '', menuId: -1 };
	},
	methods: {
		//获取当前歌单的歌曲
		getsongList() {
			getbymusiclist({ id: this.menuId }).then(res => {
				this.list = res.data;
			});
		},
		//获取歌单信息
		getbMenu() {
			getbMenuByid({ id: this.menuId }).then(res => {
				this.menu=res.data
			});
		},
		//添加至播放
		addsetSongSheetList(){
			console.log(this.list)
			store.commit('setSongSheetList',this.list)
			store.commit('setPlayIndex',0)
			initAudio()
			uni.navigateTo({
				url: '/pages/main/main'
			});
			//initAudio()
		}
	},

	onLoad: function(option) {
		//接收上个页面传递的参数（歌单id）
		this.menuId = option.id;
		this.pubUrl = pubUrl;
		this.getsongList();
		this.getbMenu();
	}
};
</script>

<style lang="less" scoped>
.song_sheet {
	.background {
		width: 100%;
		height: 150px;
	}
	.list {
		width: 100%;
		height: calc(100% - 130px);
		overflow-y: scroll;
		background-color: #f9f9f9;
		position: absolute;
		top: 130px;
		border-radius: 15px 15px 0px 0px;
		.playImg {
			width: 25px;
			height: 25px;
			margin: 10px;
		}
		.item {
			margin-bottom: 5px;
			display: flex;
			align-items: center;
			//justify-content: center;
			margin: 10px;
			margin-top: 0;
			position: relative;
			.cover {
				width: 50px;
				height: 50px;
				border-radius: 10px;
			}
			.dian {
				height: 20px;
				width: 20px;
				position: absolute;
				right: 0px;
			}
			.msgBox {
				margin-left: 10px;
				font-size: 13px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				height: 35px;

				.song {
					width: 100%;
				}
				.singer {
					width: 100%;
				}
			}
		}
	}
}
</style>
